<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>登录</title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/mdb.min.css" rel="stylesheet">

  <style>
    html, body, header,
    .view {
      height: 100%;
    }

    @media (min-width: 560px) and (max-width: 740px) {
      html, body, header,
      .view {
        height: 650px;
      }
    }

    @media (min-width: 800px) and (max-width: 850px) {
      html, body, header,
      .view {
        height: 650px;
      }
    }
  </style>
</head>

<body class="login-page">

<!-- Main Navigation -->
<header>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
    <div class="container">
      <a class="navbar-brand" href="#"><strong>欧桥数字化管理系统</strong></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
              aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </nav>
  <!-- Navbar -->

  <!-- Intro Section -->
  <section class="view intro-2">
    <div class="mask rgba-stylish-strong h-100 d-flex justify-content-center align-items-center">
      <div class="container">
        <div class="row">
          <div class="col-xl-5 col-lg-6 col-md-10 col-sm-12 mx-auto mt-5">
            <div class="card wow fadeIn" data-wow-delay="0.3s">
              <div class="card-body">
                {% csrf_token %}
                <form id="user_login_form" onsubmit="return false">
                  <div class="form-header purple-gradient">
                    <h3 class="font-weight-500 my-2 py-1"><i class="fas fa-user"></i> 登录</h3>
                  </div>
                  <div class="md-form">
                    <i class="fas fa-user prefix white-text"></i>
                    <input type="text" name="username" class="form-control">
                    <label for="orangeForm-name">用户名</label>
                  </div>
                  <div class="md-form">
                    <i class="fas fa-lock prefix white-text"></i>
                    <input type="password" name="password" class="form-control">
                    <label for="orangeForm-pass">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                  </div>
                  <div class="text-center">
                    <button class="btn purple-gradient btn-lg" id="login_submit">提&nbsp;&nbsp;&nbsp;&nbsp;交</button>
                    <hr class="mt-4">
                    <div class="inline-ul text-center d-flex justify-content-center">
                      <label>没有账号？&nbsp;&nbsp;</label><a href="/users/register" class="li-ic">注册</a>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Intro Section -->
</header>
<!-- Main Navigation -->

<!-- script -->
<script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/static/js/popper.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/mdb.min.js"></script>

<!-- Custom scripts -->
<script>

  new WOW().init();

</script>

<script>
  $('#login_submit').click(
    function () {
      $.ajax({
        url: '/users/login/',
        type: 'POST',
        data: $('#user_login_form').serialize(),
        dataType: 'JSON',
        success: function (arg) {
          if (arg.status == 200) {
            location.href = '/';
          } else {
            alert("登录失败!")
          }
        }
      });
    }
  )
</script>
</body>

</html>
